<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Template • TodoMVC</title>
    <link rel="stylesheet" href="node_modules/todomvc-common/base.css" />
    <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css" />
  </head>
  <body>
    <section class="todoapp" id="app">
      <header class="header">
        <h1>待办事项</h1>
        <input class="new-todo" placeholder="添加新任务" autofocus @keyup.enter="add" v-model.trim="name"/>
      </header>
      <section class="main">
        <input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll"/>
        <label for="toggle-all">全选</label>
        <ul class="todo-list" ref="ulRef">
          <!-- 
          li默认是未完成状态
          li的类名如果设置为editing,则当前是编辑状态
          li的类名如果设置为completed，则是完成状态 -->
          <li :class="{completed:item.done}" v-for="(item, index) in list"  @dblclick="edit1(index)" @blur="jiaodian(index)">
            <div class="view">
              <input class="toggle" type="checkbox" :checked="item.done"  v-model="item.done" />
              <label>{{item.name}}</label>
              <button class="destroy" @click="del(item.id)"></button>
            </div>
            <input class="edit" :value="item.name" />
          </li>
          <!-- <li>
            <div class="view">
              <input class="toggle" type="checkbox" />
              <label>睡觉</label>
              <button class="destroy"></button>
            </div>
            <input class="edit" value="睡觉" />
          </li> -->
        </ul>
      </section>

      <footer class="footer" v-show="list.length > 0">
        <span class="todo-count"><strong>{{surplus}}</strong> 剩余数量</span>
        <button class="clear-completed" @click="delAll">清除所有已完成</button>
      </footer>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          flag: false,
          list: [
            // done代表的是任务是否完成 默认情况下新任务是未完成的
            { id: 1, name: "吃饭", done: false },
            { id: 2, name: "睡觉", done: true },
            { id: 3, name: "打豆豆", done: false },
          ],
          //新任务名字
          name: ""
        },
        methods: {
          // 清除所有已完成
          delAll(){
            this.list = this.list.filter(item=>!item.done);
          },
          add(){
            // 非空校验
            if(this.name==='') return;
            // 添加任务
            this.list.push({
              id:this.list.length,
              name:this.name,
              done:false
            });
            // 清空输入框
            this.name = '';
          },
          // 删除任务
          del(id){
            this.list = this.list.filter(item=>item.id!==id);
          },
          // 编辑功能
          edit1(i){
            // 1.给li添加editing类名
            console.log(this.$refs.ulRef.children[i])
            this.$refs.ulRef.children[i].classList.add('editing');
            // const lis = Array.from(this.$refs.ulRef.children);
            // lis.forEach(item=>item.classList = '');
            // lis[i].className = 'editing';
            // this.$nextTick(()=> lis[i].children[1].focus())
            // 2.让编辑框获取焦点
            // 3.当编辑框失去焦点时，去掉editing类名
          },
          // jiaodian(i){
          //   console.log(11)
          //   this.$refs.ulRef.children[i].classList.remove('editing');
          // }
        },
        computed:{
          // 全选
          isAll:{
            get(){
              return this.list.every(item=>item.done);
            },
            set(val){
              this.list.forEach(item=>item.done = val);
            }
          },
          // 剩余数量
          surplus(){
            return this.list.filter(item=>!item.done).length;
          },
          
        }
      });
    </script>
  </body>
</html>
